<template>
  <div class="right-panel">
    <div v-if="isActive" class="mask" @click.self="closePanel"></div>
    
    <div class="panel-content" :style="{ width: panelWidth + 'px' }">
      <component :is="activeComponent" v-if="isActive" />
      
      <el-button class="close-btn" circle @click="closePanel">
        <el-icon><Close /></el-icon>
      </el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { Close } from '@element-plus/icons-vue'

const props = defineProps({
  panelRoute: String
})

const route = useRoute()
const router = useRouter()

const panelWidth = ref(300)
const isActive = computed(() => !!props.panelRoute)

// 查找动态组件（由组件注册）
const activeComponent = computed(() => {
  if (!props.panelRoute) return null
  
  // 查找匹配当前面板路径的组件
  const matchedRoute = router.getRoutes().find(r => 
    r.path === props.panelRoute && r.component
  )
  
  return matchedRoute?.component || null
})

// 关闭面板
const closePanel = () => {
  // 清除面板参数返回主视图
  const basePath = route.matched.find(r => r.meta?.isPanelView).path
    .replace('/panel/:panelType', '')
  
  router.push(basePath)
}
</script>